
<template>
  <div>
    <h1>球员页面</h1>
    <p>{{detail}}</p>
  </div>
</template>


<script>
export default {
  name: "Player",
  data() {
    return {
      detail: {}
    };
  },
  mounted() {
    //接受url参数id
    this.detail = this.getPlayer(this.$route.params.uid);
  },
  
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    // 别忘了调用next
      this.detail = this.getPlayer(to.params.uid);
      next();
  },
  methods: {
    getPlayer(uid) {
      switch (uid) {
        case "1":
          {
            return {
              uid: 1,
              name: "库里",
              ponit: 27
            };
          }
          break;
        case "2":
          {
            return {
              uid: 2,
              name: "哈登",
              ponit: 29
            };
          }
          break;

        default:
          return { uid: -1 };
      }
    }
  }
};
</script>